<template>
  <div class="orderModel">
      <van-popup
        v-model="show"
        round
        :style="{ minHeight: '30%' }"
    >
        <div class="model">
            <van-form @submit="onSubmit">
                <div class="info">
                    <van-field
                        v-model="form.applicant"
                        required
                        label="学生姓名:"
                        label-width="60px"
                        placeholder="请输入学生姓名"
                        :rules="[{ required: true, message: '' }]"
                    />
                    <van-field
                        v-model="form.applicantAge"
                        type="number"
                        required
                        label="学生年龄:"
                        label-width="60px"
                        placeholder="请输入学生年龄"
                        :rules="[{ required: true, message: '' }]"
                    />
                    <van-field
                        v-model="form.applicantMobile"
                        type="tel"
                        required
                        label="家长电话:"
                        label-width="60px"
                        placeholder="请输入家长电话"
                        :rules="[{ required: true, message: '' }]"
                    />
                    <van-field
                        v-model="form.code"
                        type="number"
                        required
                        maxlength="6"
                        label="验证码:"
                        label-width="60px"
                        placeholder="请输入验证码"
                        :rules="[{ required: true, message: '' }]"
                    >
                        <template #button>
                            <div class="code" :class="sendSucccess ? 'disable' : ''" @click="sendCode">{{!sendSucccess ? '发送验证码' : `${time}s后重新发送`}}</div>
                        </template>
                    </van-field>

                    <van-field
                        v-model="form.sale"
                        label="销售人员:"
                        label-width="60px"
                        placeholder="请输入销售人员"
                        :rules="[{ required: false, message: '' }]"
                    />
                </div>
                <div class="btn">
                    <van-button round style="height:100%;width: 40%;" @click="onReset">取消</van-button>
                    <van-button round type="info" native-type="submit" style="height:100%;width: 40%;">提交</van-button>
                </div>
            </van-form>
        </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue';
import { Popup, Field, Toast  } from 'vant';
Vue.use(Popup);
Vue.use(Field);
export default {
    data() {
        return {
            show: false,
            flag: true,
            id: '',
            sendSucccess: false,
            time: 60,
            form: {
                applicant: '',
                applicantAge: '',
                applicantMobile: '',
                code: '',
                sale: ''

            }
        }
    },
    mounted() {
        let openId = localStorage.getItem('px_user_openid')
        if (!openId) {
            this.getOpenId()
        }
    },
    methods: {
        sendCode() {
            if (this.sendSucccess) return;
            if (this.form.applicantMobile.length <= 0) return this.$toast('请输入正确的电话号码');
            let openId = localStorage.getItem('px_user_openid')
            this.$http.sendReservationCode({mobile: this.form.applicantMobile, openId: openId}).then(res => {
            console.log(res)
            if (res.data.code === 200) {
                this.sendSucccess = true
                this.countDown();
                Toast(res.data.message)
            }
            }).catch(err => {
            this.$toast(err.data.message)
            })
        },
        // 定时器
        countDown() {
            this.timer = setInterval(() => {
            this.time = this.time - 1
            if (this.time === 0) {
                clearInterval(this.timer)
                this.time = 10
                this.sendSucccess = false;
            }
            }, 1000)
        },
        onSubmit() {
            if (!this.flag) return
            let openId = localStorage.getItem('px_user_openid')
            if (!openId) {
                Toast('正在获取openId...')
                this.getOpenId()
                this.flag = true
                return
            }
            let query = {
                applicant: this.form.applicant,
                applicantMobile: this.form.applicantMobile,
                applicantAge: this.form.applicantAge,
                sale: this.form.sale,
                code: this.form.code,
                openId: localStorage.getItem('px_user_openid'),
                courseId: this.id
            }
            this.$http.submitOrder(query).then(res => {
                this.$toast(res.data.message)
                setTimeout(() => {
                    this.flag = true
                    this.show = false
                    this.$emit('reload')
                }, 1500)
            }).catch(err => {
                this.flag = true
                this.$toast(err.data.message)
            })
        },
        async getOpenId() {
            let code = this.getCode(to.path)
            if (!code) return
            let ret = await this.$http.getUserIfRegister({ code })
            localStorage.setItem('px_user_openid', ret.data.result.openId)
            // 保存完整的登录数据到缓存
            this.$store.dispatch('saveLoginData', ret.data)
        },
        onReset() {
            this.show = false
            this.form = {
                applicant: '',
                applicantAge: '',
                applicantMobile: '',
                sale: '',
                code: ''
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .model {
        width: 270px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        padding: 25px 5px;
        box-sizing: border-box;
        .btn {
            width: 80%;
            height: 35px;
            margin: auto;
            margin-top: 20px;
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            color: #fff;
            font-size: 14px;
        }
        .code {
            font-size: 12px;
            color: #FF5505;
        }
        .disable {
            color: #999 !important;
        }
    }
</style>
